<style>
.has-corner {
  position: relative;
  border: .05rem solid #e75c54;
}
.has-corner > .corner {
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
}
.has-corner > .corner:before {
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1.5rem solid #e75c54;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.has-corner > .corner > div {
  transform: rotate(45deg);
  position: relative;
  text-align: center;
  color: #fff;
  position: relative;
  top: .5rem;
  right: -.5rem;
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div>
          <div class="has-corner">
            <img src="img/magic-tree.png" alt="">
            <div class="corner"><div>NEW</div></div>
          </div>
        </div>
        <div><pre class="prettyprint"><code>&lt;div class=&quot;has-corner&quot;&gt;
  &lt;img src=&quot;img/magic-tree.png&quot; alt=&quot;&quot;&gt;
  &lt;div class=&quot;corner&quot;&gt;&lt;div&gt;NEW&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.has-corner {
  position: relative;
  border: .05rem solid #e75c54;
}
.has-corner > .corner {
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
}
.has-corner > .corner:before {
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1.5rem solid #e75c54;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.has-corner > .corner > div {
  transform: rotate(45deg);
  position: relative;
  text-align: center;
  color: #fff;
  position: relative;
  top: .5rem;
  right: -.5rem;
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
